<template>
    <div>
        <div class="button-group">
            <el-button link type="primary" @click="handleBack">
                <el-icon>
                    <Back />
                </el-icon>
                返回
            </el-button>
            <el-button-group>
                <el-button type="primary" @click="handleSubmit">
                    <el-icon>
                        <Check />
                    </el-icon>
                    {{ _Id ? '修改' : '保存' }}
                </el-button>
            </el-button-group>
        </div>
        <el-form ref="formRef" :model="P_Form" label-width="140px" class="form-content">
            <el-form-item v-for="item in _FromConfig" :key="item.prop" :label="item.label" :prop="item.prop"
                :rules="item.rules">
                <!-- 输入框 -->
                <el-input v-if="item.type === 'input'" v-model="P_Form[item.prop]" :placeholder="item.placeholder" />

                <!-- 选择框 -->
                <template v-if="item.type === 'select'">
                    <el-select v-if="item.prop == 'responsibleUser'" v-model="P_Form[item.prop]"
                        :multiple="item.multiple" :placeholder="item.placeholder" class="w-full">
                        <el-option v-for="option in P_GetUserAll" filterable :key="option.userId"
                            :label="`${option.username}${option.title ? ' - ' + option.title : ''}`"
                            :value="option.userId" />
                    </el-select>
                    <el-select v-else v-model="P_Form[item.prop]" :multiple="item.multiple"
                        :placeholder="item.placeholder" filterable class="w-full">
                        <el-option v-for="option in item.options" :key="option.value" :label="option.label"
                            :value="option.value" />
                    </el-select>
                </template>

                <!-- 日期选择器 -->
                <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-if="item.type === 'date'"
                    v-model="P_Form[item.prop]" type="date" :placeholder="item.placeholder" style="width: 100%" />

                <!-- 文本框 -->
                <el-input v-if="item.type === 'textarea'" v-model="P_Form[item.prop]" type="textarea" :rows="item.rows"
                    :placeholder="item.placeholder" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { _FromConfig } from '../../Config'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import P_store from "@store/supplierpro/index.js"
import { storeToRefs, defineStore } from "pinia"

const P = P_store()
const R = useRouter()
const { P_Form, P_GetUserAll } = storeToRefs(P)
const _G = defineStore('main', {})()

const _Id = ref(_G.M.GetId())
const formRef = ref(null)

onMounted(async () => {
    handleReset()
    await P.Hp_GetUserAll()
 
})

// 初始化表单数据
_FromConfig.forEach(item => {
    P_Form[item.prop] = item.multiple ? [] : ''
})

const handleSubmit = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            console.log('表单数据：', P_Form)
            P.Hp_Save()
        } else {
            ElMessage.error('请填写完整信息')
            return false
        }
    })
}

const handleReset = () => {
    formRef.value?.resetFields()
}

const handleBack = () => {
    R.push('/supplierpro')
}
</script>

<style lang="less" scoped>
.button-group {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-button {
        display: flex;
        align-items: center;
        gap: 4px;
    }
}

.form-content {
    max-width: 800px;
    margin: 0 auto;
}

:deep(.el-select) {
    width: 100%;
}
</style>